import React, { useState } from 'react'
import Menu from '@/views/Menu'
import '@/assets/css/CouponIndex.scoped.css'
import { Link } from 'react-router-dom'

const Component = () =>
{
  let [active, SetActive] = useState('all')
  let [coupon, SetCoupon] = useState([])
  let rate = useState(1)

  React.useEffect(() => 
  {
    CouponData('all')
  },[])

  //选项卡切换
  const TabChange = async (key: string) => 
  {
    SetActive(key)

    CouponData(key)
  }

  const CouponData = async (value) =>
  {
    var params = {
      busid: React.business.id,
      key: value
    }
    var result = await React.request.post('coupon/couponused', params)

		if(result.code == 0)
		{
			React.toast(result.msg, null, 'fail')
			return false
		}

		SetCoupon(result.data)
  }

  return (
    <>
      {/* 选项卡切换 */}
      <React.UI.Tabs onChange={TabChange} activeKey={active} activeLineMode={'full'}>
        <React.UI.Tabs.Tab title="全部" key="all" />
        <React.UI.Tabs.Tab title="未使用" key="0" />
        <React.UI.Tabs.Tab title="已使用" key="1" />
      </React.UI.Tabs>

      <div className="coupon_list">
        {
          coupon.map((item, key) => (
            <div className="coupon_item" key={key}>
              <div className="item_content">
                  <Link to="/coupon/info">
                      <div className="left">
                          {item.coupon.rate * 100}<span>折</span>
                      </div>
                      <div className="right">
                          <div>{item.coupon.title}</div>
                          <div>订单满<span>100元</span>打<span>{item.coupon.rate*100}折</span></div>
                          <div>每人限领1张</div>
                          <div>领取后至{item.coupon.endtime_text}有效</div>
                      </div>
                  </Link>
              </div>
              <div className="item_btn">
                {
                  item.status == 1 ? 
                  <React.UI.Button color='primary' fill='solid' size='mini'>立即使用</React.UI.Button> :
                  <React.UI.Button color='warning' disabled fill='solid' size='mini'>已使用</React.UI.Button>
                }
              </div>
            </div>
          ))
        }
      </div>






      <Menu />
    </>
  )
}

export default Component